<template>
    <view class="change-password-container">
        <u-gap height="40" bg-color="#FFFFFF"></u-gap>
        <view class="valid-mobile" v-show="step === 1">
            <u-form :model="validMobileForm" ref="validMobileForm">
                <u-form-item label-position="top">
                    <u-input v-model="bindMobile" disabled label="已验证手机" placeholder="请输入手机号" maxlength="11" />
                </u-form-item>
                <u-form-item label-position="top">
                    <u-input v-model="validMobileForm.captcha" placeholder="请输入图片验证码" maxlength="4" clearable />
                    <u-image slot="right" width="150" height="70" :src="valid_img_url" @click="getValidImgUrl"></u-image>
                </u-form-item>
                <u-form-item label-position="top">
                    <u-input v-model="validMobileForm.sms_code" placeholder="请输入短信验证码" maxlength="6" clearable />
                    <u-button slot="right" type="error" size="mini" @click="getCode">{{codeTips}}</u-button>
                    <u-verification-code seconds="60" ref="uCode" @change="codeChange"></u-verification-code>
                </u-form-item>
            </u-form>
            <u-button :disabled="val_disabled_mobile" class="u-m-20" type="error" shape="circle" @click="submitValMobileForm">提交校验</u-button>
        </view>
        <view class="change-password" v-show="step === 2">
            <u-form :model="changePasswordForm" ref="changePasswordForm">
                <u-form-item label-position="top">
                    <u-input v-model="changePasswordForm.password" placeholder="请输入6-20位英文或数字密码" type="password"
                        maxlength="20" clearable />
                </u-form-item>
                <u-form-item label-position="top">
                    <u-input v-model="changePasswordForm.rep_password" placeholder="请确认密码" type="password" maxlength="20"
                        clearable />
                </u-form-item>
                <u-form-item label-position="top">
                    <u-input v-model="changePasswordForm.captcha" placeholder="请输入图片验证码" maxlength="4" clearable />
                    <u-image slot="right" width="150" height="70" :src="valid_img_url" @click="getValidImgUrl"></u-image>
                </u-form-item>
            </u-form>
            <u-button :disabled="val_disabled_password" class="u-m-20" type="error" shape="circle" @click="submitChangeForm">修改密码</u-button>
        </view>
        <u-toast ref="uToast" />
    </view>
</template>

<script>
    import * as API_Common from '@/api/common.js'
    import * as API_Safe from '@/api/safe.js'
    import Cache, {
        Keys
    } from '@/utils/cache.js';
    import {
        Foundation,
        RegExp
    } from '@/ui-utils/index.js'
    export default {
        data() {
            return {
                uuid: Cache.getItem('uuid'),
                step: 1,
                codeTips: '获取验证码',
                validMobileForm: {
                    captcha: '',
                    sms_code: ''
                },
                valid_img_url: '',
                changePasswordForm: {
                    password: '',
                    rep_password: '',
                    captcha: ''
                }
            };
        },
        onLoad() {
            this.$nextTick(this.getValidImgUrl)
			const mobile = Foundation.secrecyMobile(Cache.getItem('user').mobile);
			if(mobile == 'null'){
				this.step = 2;
			}
        },
        computed: {
            bindMobile() {
                const mobile = Foundation.secrecyMobile(Cache.getItem('user').mobile);
                return mobile=='null'?"":mobile;
            },
            /** 校验手机号 按钮是否禁用 */
            val_disabled_mobile() {
                const {
                    captcha,
                    sms_code
                } = this.validMobileForm
                return !(captcha && sms_code)
            },
            /** 修改密码 按钮是否禁用 */
            val_disabled_password() {
                const {
                    password,
                    rep_password,
                    captcha
                } = this.changePasswordForm
                return !(password && rep_password, captcha)
            }
        },
        methods: {
            /** 获取图片验证码URL */
            getValidImgUrl() {
                this.valid_img_url = API_Common.getValidateCodeUrl(this.uuid, this.step === 1 ? 'VALIDATE_MOBILE' :
                    'MODIFY_PASSWORD')
            },
            /** 获取验证码 */
            getCode() {
                const {
                    uuid
                } = this
                const {
                    captcha
                } = this.validMobileForm
                if (!captcha) {
                    this.$u.toast('请填写图片验证码')
                    return
                }
                if (this.$refs.uCode.canGetCode) {
                    API_Safe.sendMobileSms(uuid, captcha, "VALIDATE_MOBILE").then(res => {
                        this.$u.toast('验证码已发送')
                        this.$refs.uCode.start()
                    }).catch(this.getValidImgUrl);
                } else {
                    this.$u.toast('倒计时结束后再发送')
                }
            },
            codeChange(text) {
                this.codeTips = text
            },
            /** 手机验证 */
            submitValMobileForm() {
                const {
                    sms_code
                } = this.validMobileForm
                if (!sms_code) {
                    this.$u.toast('请填写短信验证码')
                    return
                }
                API_Safe.validChangePasswordSms(sms_code).then(() => {
                    this.step = 2
                    this.getValidImgUrl()
                }).catch(this.getValidImgUrl)
            },
            /** 修改密码 */
            submitChangeForm() {
                const {
                    uuid
                } = this
                const {
                    password,
                    rep_password,
                    captcha
                } = this.changePasswordForm
                if (!RegExp.password.test(password)) {
                    this.$u.toast('密码格式不正确')
                    return false
                }
                if (password !== rep_password) {
                    this.$u.toast('两次密码输入不一致')
                    return false
                }
                if (!captcha) {
                    this.$u.toast('请填写图片验证码')
                    return false
                }
                API_Safe.changePassword(uuid, captcha, password,"MODIFY_PASSWORD").then(() => {
                    this.$refs.uToast.show({
                        title: '修改密码成功',
                        type: 'success',
                        callback: function(){
                            uni.navigateBack()
                        }
                    })
                }).catch(this.getValidImgUrl)
            }
        }
    }
</script>

<style lang="scss" scoped>
    .change-password-container {

        .valid-mobile,
        .change-password {
            background-color: #FFFFFF;
            margin: 30rpx;
            border-radius: 20rpx;
            padding: 20rpx 40rpx;
            box-shadow: 0 2px 12px 0 rgba(0, 0, 0, .1);
        }
    }
</style>
